<template>
    <app style="width: 100%;height: 100%;text-align: center;">
        <div style="margin-bottom: 5%;margin-top: 1%" v-for="img in images" :key="img">
        <croppa
                v-model="img.images"
                :initial-image=img.image
                initial-position="top"
                :quality="1.0"
                :width=600
                :height=315
                placeholder="点击上传图片"
                remove-button-size="20"
                :placeholder-font-size="24"
                :disabled="false"
                :prevent-white-space="true"
                :show-remove-button="true"
                >
        </croppa >
            <div>
            <el-button type="success" plain @click="saveImg(img.id,base64Images = img.images.generateDataUrl('image/jpeg',0.2))">保存第{{img.id}}张</el-button>
            </div>
        </div>
    </app>
</template>

<script>
    export default {
        name: "updateHomeImage",
        data(){
            return{
                images:[],
                base64Images:[],
                imageData:{
                    id:'',
                    image:''
                }
            }
        },
        methods:{
            getAllHomeImage(){
                this.$api.getAllHomeImage()
                .then(res=>{
                    this.images=res.data
                })
            },
            saveImg(id){
                this.imageData.id=id;
                this.imageData.image=this.base64Images;
                this.$api.updateHomeImages(this.imageData)
                .then(res=>{
                    this.$message.success(res.message);
                })

            }
        },
        mounted() {
        this.getAllHomeImage();
        }

    }
</script>

<style scoped>

</style>